<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/7 22:53
    @Version 1.0
    @Description 文件说明
  -->
    <meta charset="utf-8">
    <title>form表单</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>

<form class="layui-form" lay-filter="myForm">
    <!--01input容器独占一行-->
    <div class="layui-form-item">
        <label class="layui-form-label">显示文字</label>
        <!--input容器独占一行(layui-input-block)-->
        <div class="layui-input-block">
            <!--lay-verify="required" lay-reqText="独占一行不能为空"(自定义时失效)-->
            <!--lay-verType用于定义异常提示层模式-->
            <input class="layui-input" name="input1" />
        </div>
    </div>

    <!--02input容器不独占一行-->
    <div class="layui-form-item">
        <label class="layui-form-label">显示文字</label>
        <!--input容器不独占一行(layui-input-inline)-->
        <div class="layui-input-inline">
            <input class="layui-input" name="input2"/>
        </div>
        <label class="layui-form-label">显示文字</label>
        <div class="layui-input-inline">
            <input class="layui-input"  name="input3" placeholder="添加文字"/>
        </div>
    </div>

    <!--03复选框-->
    <div class="layui-form-item">
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" name="like[read]" title="阅读" checked>
            <!--开关风格-->
            <input type="checkbox" name="switch" lay-text="ON|OFF" lay-skin="switch">
        </div>
    </div>

    <!--04下拉框-->
    <div class="layui-form-item">
        <label class="layui-form-label">下拉框</label>
        <div class="layui-input-block">
            <select id= "city1" name="city" lay-verify="" lay-search lay-filter="formSelect">
                <option value="010">layer</option>
                <option value="021">form</option>
                <option value="0571" selected>layim</option>
            </select>
        </div>
    </div>
    <!--提交按钮，位置有点诡异-->
    <button class="layui-btn" lay-submit></button>
</form>
<button id="initForm" class="layui-btn">初始化表单</button>
<button id="addDom" class="layui-btn">为下拉框新增option</button>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['element', 'jquery', 'form'], function () {
        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;

        //自定义校验规则
        form.verify({
            username: function (value, item) {
                if (value.length < 10) {
                    return "用户名不能少于10位";
                }
            }
        });
        // -----------------------------------------------------------------
        //监听下拉框选择事件
        form.on('select(formSelect)',function (data) {
            console.log(data);
        });

        // ---------------------------------------------------------------
        //方法：为表单初始化值,找到对应的”name“值，确实可以传数据。
        $("#initForm").click(function () {
            var data= {
              "input1":"12345",
              "input2":"123",
              "input3":"45",
              "like[read]":true,
                "city":"021"
            };
            form.val("myForm",data);//此时的lay-filter为表单的值
            console.log(form.val("myForm"));//得到表单区域所有值
        });
        //-----------------------方法：重新渲染表单--------------------------------
        $("#addDom").click(function () {
            $("#city1").append(" <option value='option' >新增option</option>");
            form.render();//重新渲染表单（select,checkbox,radio）
        });
    });
</script>
</body>
</html>

